<template>
  <div>
  <!-- <el-button @click="resetDateFilter">清除日期过滤器</el-button> -->
  <el-button @click="clearFilter">全部重置</el-button>
  <el-table ref="filterTable"  :data="tableData.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))" style="width: 100%">
    <el-table-column prop="name" label="职位名称"  width="180"> </el-table-column>
    <el-table-column prop="education" label="学历要求"  width="180"
    :filters="[{text: '本科', value: '本科'}, {text: '博士', value: '博士'},{text: '研究生', value: '研究生'}]"
    :filter-method="filterHandler"  > </el-table-column>
      <el-table-column prop="resume_name" label="工作经验要求" width="180" 
      :filters="[{text: '工作五年以上', value: '工作五年以上'}, {text: '应届生，无工作经验', value: '应届生，无工作经验'}, {text: '无工作经验', value: '无工作经验'}, {text: '有2~3年工作经验', value: '有2~3年工作经验'}]"
      :filter-method="filterHandler"  > </el-table-column>
      <!-- <el-table-column prop="stase" label="目前状态"  width="180"> </el-table-column> -->
      <el-table-column prop="tag" label="标签" width="100"
      :filters="[{ text: '限男生', value: '限男生' }, { text: '男女不限', value: '男女不限' }]"
      :filter-method="filterTag"
      filter-placement="bottom-end">
      <template slot-scope="scope">
        <el-tag :type="scope.row.tag === '限男生' ? 'primary' : 'success'" disable-transitions>{{scope.row.tag}}</el-tag>
      </template>
    </el-table-column>
    <el-table-column prop="date" label="报名截止日期" sortable width="300" column-key="date"
      :filters="[{text: '2016-05-01', value: '2016-05-01'}, {text: '2016-05-02', value: '2016-05-02'}, {text: '2016-05-03', value: '2016-05-03'}, {text: '2016-05-04', value: '2016-05-04'}]"
      :filter-method="filterHandler"  > </el-table-column>
    <el-table-column
      align="right">
      <template slot="header" slot-scope="scope">
        <el-input  v-model="search" size="big" placeholder="输入关键字搜索"/>
      </template>
      <template slot-scope="scope">
        <el-button size="big" @click="add">报名</el-button>
        <el-button size="big" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
      </template>
      
    </el-table-column>

  </el-table>


<!-- form表单 -->
  <el-dialog style="width: 1000px;height: 1000px;" title="报名信息" :visible.sync="zdydialog">
      <el-form :model="form">

        <el-form-item label="名称" width="80px" prop="name">
          <el-input placeholder="请输入姓名" v-model="form.name" ></el-input>
        </el-form-item>

        <el-form-item label="年龄" width="80px" prop="age">
          <el-input placeholder="请输入年龄" v-model="form.age" ></el-input>
        </el-form-item>

        <el-form-item label="学历" width="80px">
          <el-input placeholder="请输入学历" v-model="form.education" ></el-input>
        </el-form-item>

        <el-form-item label="工作经验" width="80px">
          <el-input placeholder="请描述工作经验" v-model="form.resume_name" ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>

    </el-dialog>


  </div>
</template>

<script>
  export default {
    data() {
      return {
        tableData:[
         
        {name:'保安',education:'博士',tag:'限男生',date: '2016-05-01',resume_name:'工作五年以上',},
        {name:'总管',education:'本科',tag:'限男生',date: '2016-05-03',resume_name:'有2~3年工作经验',},
        {name:'保洁',education:'本科',tag:'男女不限',date: '2016-05-01',resume_name:'应届生，无工作经验',},
        {name:'刑警',education:'研究生',tag:'限男生',date: '2016-05-02',resume_name:'工作五年以上',},
        {name:'秘书',education:'研究生',tag:'男女不限',date: '2016-05-01',resume_name:'无工作经验',},
        {name:'厨师',education:'本科',tag:'限男生',date: '2016-05-03',resume_name:'有2~3年工作经验',},
        {name:'中介',education:'研究生',tag:'男女不限',date: '2016-05-04',resume_name:'应届生，无工作经验',},
        {name:'演员',education:'博士',tag:'男女不限',date: '2016-05-02',resume_name:'工作五年以上',},
        ],
        search:'',
        zdydialog: false,
        formLabelWidth: '80px',
        form: {},
        submitType : "",  
      }

    },
    methods: {
      clearFilter() {
        this.$refs.filterTable.clearFilter();
      },
      formatter(row) {
        return row.address;
      },
      filterTag(value, row) {
        return row.tag === value;
      },
      filterHandler(value, row, column) {
        const property = column['property'];
        return row[property] === value;
      },
      add() {
        this.form = {
        name: '',
        age: '',
        education: '',
        resume_name: ''
      }
      this.submitType = "add";
      this.zdydialog = true;
      },
      submit() {
      this.zdydialog = false

      // if(this.submitType == "add"){
      //   this.form.date = reformat(this.form.date);
      //   this.tableData.push(this.form)
      // }else {

      // }
      this.$confirm('确定报名', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '报名成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消报名'
          });          
        });
    },
      handleDelete(index, row) {
        console.log(index, row);
        this.$confirm(`确认是否删除姓名为${row.name}的记录？`, '删除', {
                    confirmButtonText: '确定',
                }).then(() => {
                    let res = this.tableData.splice(index, 1)
                    let msg = `删除成功`
                    if (!res) {
                        msg = `删除失败`
                    }
                    this.$message({
                        type: 'info',
                        message: msg
                    });
                })
              }
            },
            cancel() {
      this.zdydialog = false
      }
    }
  
</script>
<style>
</style>